<template>
	<view class="main">
		<u-navbar
			title="企业详情"
			@leftClick="navigateBack"
			safeAreaInsetTop
			fixed
			placeholder
			:autoBack="true"
		></u-navbar>
		<view class="main_head">
			<view class="item-avatar css3order"><image :src="imgURL+ info.logo" ></image></view>
			<view class="item-box">
				<view class="item-name">{{info.ent_name ?  info.ent_name :''}}</view>
				<view class="item-info">
					<text>
						{{info.province_name ? info.province_name :''}}{{info.city_name ? info.city_name :''}}  · {{info.scale ? info.scale :''}}  · {{info.fieldname ? info.fieldname :''}}
					</text>
				</view>
				<view class="item-auth">
					<view class="item-view">
						<image src="../../static/img/hot.png" ></image>
						{{info.view ? info.view :10}}
					</view>
					<image class="authimg" src="../../static/img/auth.png" ></image>
				</view>
			</view>
		</view>
		<view class="table_detail"> 
			<view :class="tableactive == 1 ? 'active' : 'inactive'" @click="table(1)">
				职位（{{info.position.length || 0}}）
			</view>
			<view :class="tableactive == 2 ? 'active' : 'inactive'" @click="table(2)">
				公司信息
			</view>
		</view>
		<view style="display: flex;justify-content: center;">
		<view class="main_content">
			<view class="position_content" v-if="tableactive == 1">
				<block v-for="(item,index) in info.position">
					<view class="position_box">
						<view class="position_row_name">
							<view class="position_time">
								岗位：{{item.position ? item.position :''}}
							</view>
							<view class="position_time_r">{{item.salary_low ? item.salary_low :''}}-{{item.salary_hei ? item.salary_hei :''}}</view>
						</view>
						<view class="position_row">
							<view style="margin-right: 20rpx;">
								招聘人数：{{item.num ? item.num :1}}人
							</view>
							<view style="margin-right: 20rpx;" v-if="item.work_y">
								{{item.work_y ? item.work_y :''}}经验
							</view>
							<view style="margin-right: 20rpx;" v-if="item.education">
								{{item.education ? item.education :''}}
							</view>
							<view v-if="item.sex">
							{{item.sex ? item.sex :''}}
							</view>
						</view>
						<view class="position_row" v-if="item.skill">
								职业技能：{{item.skill ? item.skill :''}}	
						</view>
						<view class="position_row" @click="showIntro(index)" style="justify-content: space-between">
							<view>岗位介绍：</view>
							<view><u-icon :name="showpositionintro == index ? 'arrow-down' : 'arrow-right'" color="#2979ff" size="16"></u-icon></view>
						</view>
						<view v-if="showpositionintro == index" class="position_intro" v-html="item.introduce ? item.introduce :''">
						</view>
					</view>
				</block>
			</view>
			<view class="main_content_box" v-else>
				<view style="margin-top:40rpx">
					<view class="main_title">
						<view>公司简介</view> 
					</view>
					<view class="main_box">
						<view class="main_box_job">
							<view class="main_box_job_intro">
								{{info.about ? info.about :''}}
							</view>
						</view>
					</view>
				</view>
				<!-- <view style="margin-top:60rpx">
					<view class="main_title">
						<view>公司福利</view> 
					</view>
					<view class="main_box">
						<view class="main_box_job" style="display: flex;" v-if="info.welfarelist">
							<block v-for="(item,index) in info.welfarelist" >
								<view class="main_box_label">
									{{item.name}}
								</view>
							</block>
						</view>
					</view>
				</view> -->
				<view style="margin-top:60rpx">
					<view class="main_title">
						<view>视频展示</view> 
					</view>
					<view class="main_box">
						<view class="main_box_job">
							<view v-if="info.video">
								<video style="width: 560rpx;height: 300rpx;" :src="imgURL+info.video"></video>
								<!-- <video-player :title="'企业视频'" :videoSrc="imgURL+info.video" :videoType="'mp4'">
								 </video-player> -->
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top:60rpx">
					<view class="main_title">
						<view>办公室环境</view> 
					</view>
					<view class="main_box">
						<view class="main_box_job">
							<view v-if="imgs">
								<block v-for="(item,index) in imgs">
									<image @click="shoImg(index)" style="width: 170rpx;height:170rpx;margin-left: 20rpx;" :src="imgURL + item"></image>
								</block>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top:60rpx">
					<view class="main_title">
						<view>公司福利</view> 
					</view>
					<view class="main_box">
						<view class="main_box_job" style="display: flex;flex-wrap: wrap;" v-if="info.welfarelist">
							<block v-for="(item,index) in info.welfarelist" >
								<view class="main_box_label">
									{{item.name}}
								</view>
							</block>
						</view>
					</view>
					<view class="main_box">
						<view class="main_box_job">
							<view class="main_box_job_intro">
								{{info.remark || ""}}
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top:60rpx">
					<view class="main_title">联系方式</view>
					<view class="main_box">
						<view class="main_box_job">
							<view class="main_box_job_time">
								<u-icon
									size="46rpx"
									color="#2e72df"
									name="home"
									style="margin-right: 20rpx;"
								></u-icon>
								{{info.hr ? info.hr :''}}
							</view>
							<view class="main_box_job_time">
								<u-icon
									size="46rpx"
									color="#2e72df"
									name="phone"
									style="margin-right: 20rpx;"
								></u-icon>
								{{info.phone ? info.phone :''}}
							</view>
							<view class="main_box_job_time">
								<u-icon
									size="46rpx"
									color="#2e72df"
									name="map"
									style="margin-right: 20rpx;"
								></u-icon>
								{{info.address ? info.address :''}}
							</view>
						</view>
					</view>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import videoPlayer from '@/components/video'
	import { getEnterprise,getJobSalary } from '@/api/enterprise.js'
	import { getPositionInfo,savePosition } from '@/api/position.js'
	import { imgURL } from '@/utils/config'
	import util from "@/utils/utils.js"
	export default {
		components: {
			videoPlayer
		},
		data() {
			return {
				id:'',
				showpositionintro:-1,
				tableactive:1,
				showSalary:false,
				salarylist:[],
				imgURL:imgURL,
				info: '',
				imgs:[],
				height:0,
				showModal:false,
				positionform:{
					position_id:'',
					position:'',// varchar(255) NOT NULL DEFAULT '' COMMENT '职位',
					salary:'',
					salary_low:'', // `` varchar(255) NOT NULL DEFAULT '' COMMENT '薪资',
					salary_hei:'',//  `` varchar(255) NOT NULL DEFAULT '',
					introduce:'',//  `` text NOT NULL COMMENT '职位介绍',
					skill:'',//  `` char(50) NOT NULL DEFAULT '0' COMMENT '技能',
				}
			}
		},
		onLoad(option) {
			const that = this
			if(option) that.id = option.id
			 uni.getSystemInfo({
					success: (res)=> {
						that.height = res.windowHeight- uni.upx2px(100)-260 //获取系统信息，可使用窗口的高度
					}
			});
			this.getEnterprise()
		},
		methods: {
			table(tableactive){
				this.tableactive = tableactive
			},
			//获取信息
			getEnterprise() {
				let data = {}
				if(this.id){
					data = {ent_id:this.id}
				}
				getEnterprise(data).then(res=>{
					if(res.code == 200){
						this.info = res.data
						if(res.data.imgs){
							this.imgs = JSON.parse(res.data.imgs)
						}
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}
				})
			},
			
			
			openmodel(position_id) {
				this.showModal = true
				getJobSalary({}).then((res)=>{
					if(res.code == 200){
						this.salarylist.push(res.data)
						this.salarylist.push(res.data)
					}
				})
				
				if(position_id){
					getPositionInfo({position_id:position_id}).then((res)=>{
						this.positionform = res.data
						this.positionform.salary = this.positionform.salary_low +"-"+this.positionform.salary_hei
					})
				}
				
			},
			
			//showPicker
			showPicker(){
				this.showposition = true
			},
			//选择领域
			PickerChange(e){
				this.positionform.salary_low = e.value[0].salary
				this.positionform.salary_hei = e.value[1].salary
				this.positionform.salary = e.value[0].salary+"-"+e.value[1].salary
				this.showSalary = false
			},
			//薪资弹窗
			showPicker() {
				this.showSalary = true
			},
			//点击按钮关闭薪资弹窗
			close() {
				this.showSalary = false
			},
			//点击遮罩层关闭薪资弹窗
			cancel() {
				this.showSalary = false
			},
			
			shoImg(index){
				var imgbox = [];
				for(let i in this.imgs){
					imgbox.push(this.imgURL+this.imgs[i])
				}
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
			},
			
			//显示招聘岗位需求
			showIntro(index){
				if(this.showpositionintro == index) this.showpositionintro = -1
				else this.showpositionintro = index
			},
			
			//发布工作岗位
			savePosition(){
				let that = this
				if (this.positionform.position == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写招聘岗位'
					});
				}
				if (this.positionform.salary == "") {
					return uni.showToast({
						icon: 'none',
						title: '请选择薪资待遇'
					});
				}
				if (this.positionform.skill == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写岗位所需技能'
					});
				}
				if (this.positionform.introduce == "") {
					return uni.showToast({
						icon: 'none',
						title: '请填写岗位描述和介绍'
					});
				}
				savePosition(this.positionform).then(res=>{
					if(res.code == 200){
						that.showModal = false
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								that.getEnterprise()
							}
						});
					}
					else{
						return uni.showToast({
							icon: 'none',
							title: "提交失败"
						});
					}
				})
			},
			
			// 新增图片
			async upload() {
				let _this = this;
				util.uploadFile("/user/Upload").then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none',
							success() {
								_this.form.avatar = res.data
							}
						});
					}
					else{
						return uni.showToast({
							title:res.msg,
							duration: 2000,
							icon:'none'
						});
					}
				})
			},
			
			// 获取地理位置
			getAuthorizeMap(){
				const that = this
				uni.getLocation({
						type: 'wgs84',
						success (res) {
							that.tude.latitude = res.latitude
							that.tude.longitude = res.longitude
							that.showMapEl = true
						}
				});
			},
			
			goto(tourl) {
				uni.navigateTo({
					url: tourl
				});
			}
		},
	}
	
</script>

<style lang="scss">
	.main{
		margin: 30rpx;
		.main_head{
			display: flex;
			.item-box{
				margin-left:20rpx;
				.item-name{
					height: 50rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					color: #333;
					font-size: 36rpx;
					font-weight: bold;
				}
				.item-info{
					height: 60rpx;
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #999999;
				}
				.item-auth{
					display: flex;
					.item-view{
						display: flex;
						font-size: 28rpx;
						color: #ff6d6d;
						margin-right: 40rpx;
						image{
							width: 35rpx;
							height: 35rpx;
						}
					}
					.authimg{
						width:130rpx;
						height: 40rpx;
					}
				}
			}
			.item-avatar{
				width: 140rpx;
				height: 140rpx;
				image{
					width: 140rpx;
					height: 140rpx;
				}
			}
		}
		
		
		.css3order{
			padding: 0 10rpx;
			border-radius: 10rpx;
			border: 1px solid #fbfbfb;
			box-shadow: 0rpx 8rpx 8rpx #ccc;
		}
		
		.table_detail{
			margin-top: 40rpx;
			font-size: 30rpx;
			font-weight: bold;
			display: flex;
			justify-content: space-around;
			.inactive{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				width: 150rpx;
				padding: 20rpx 0;
				color: #666666;
			}
			.active{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				width: 150rpx;
				padding: 20rpx 0;
				color: #3e90ff;
			}
			.active::after{
				content:'';
				margin-top: 20rpx;
				background-color: #3e90ff;
				width: 80rpx;
				height: 6rpx;
			}
		}
		
		.main_content{
			background-color: #fff;
			width: 670rpx;
			padding: 0 40rpx;
			position: absolute;
			display: flex;
			.main_content_box{
				.main_title{
					color: #333;
					font-size: 34rpx;
					font-weight: bold;
				}
				.main_box{
					display: flex;
					.main_box_job_left{
						margin-top: 44rpx;
						margin-right: 20rpx;
					}
					.main_box_job{
						margin-top: 10rpx;
						.main_box_job_company{
							color: #000;
							height: 80rpx;
							line-height: 80rpx;
						}
						.main_box_label{
							border:1px solid #666666;
							border-radius: 20rpx;
							padding: 6rpx 20rpx;
							margin-left: 10rpx;
							margin-bottom: 10rpx;
						}
						.main_box_job_time{
							display: flex;
							align-items: center;
						}
						.main_box_job_time, .main_box_job_intro, .main_box_job_post{
							margin: 10rpx 0;
							color: #777777;
						}
						.main_box_job_time, .main_box_job_post{
							color: #777777;
						}
						.main_box_job_project{
							margin: 20rpx 0;
							background-color: #f9f9f9;
							border: 1px solid #cfcfcf;
							padding: 20rpx 30rpx;
							border-radius: 10rpx;
						}
					}
				}
			}
			.position_content{
				width: 100%;
				.position_box{
					width: 100%;
					padding: 40rpx 0;
					
					.position_row_name{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 30rpx;
						font-weight: bold;
						color: #333;
					}
					.position_row{
						width: 100%;
						display: flex;
						align-items: center;
						margin: 20rpx 0;
						font-size: 28rpx;
						color: #333;
						.position_time{
							font-size: 32rpx;
						}
						.position_time_r{
							color:#2e72df;
						}
					}
					.position_intro{
						margin: 20rpx 0;
						color: #777777;
					}
				}
			}
		}
		
		.main_foot{
			width: 100%;
			display: flex;
			align-items: center;
			color: #fff;
			position: fixed;
			bottom: 0;
			.foot_left{
				height:120rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				background-color: #795fff;
				width: 50%;
				padding-top: 20rpx;
				text{
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					display: block;
					width: 100%;
				}
			}
			.foot_right{
				text-align: center;
				height:140rpx;
				line-height: 140rpx;
				width: 50%;
				background-color: #000;
			}
		}
	}
</style>